<template>
  <div class="update-sex">
    <van-picker
      title="标题"
      show-toolbar
      :columns="columns"
      :default-index="value"
      @confirm="onConfirm"
      @cancel="onCancel"
      @change="onChange"
    />

  </div>
</template>

<script>
import { Toast } from 'vant'
import { updateUserprofile } from '@/api/user.js'

export default {
  name: 'UpdateSex',
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      columns: ['男', '女', { text: '不男不女', disabled: true }],
      // columns: ['男', '女'],
      localSex: this.value
    }
  },
  methods: {
    async onConfirm() {
      // console.log(this.value)
      Toast.loading({
        message: '保存中...',
        forbidClick: true, // 禁止背景点击
        duration: 0 // 持续展示
      })
      try {
        await updateUserprofile({
          gender: this.value // 传入的参数应该为 选中的男或者女 后台默认 0:男  1:女 传01而不是传男女
        })
        Toast('更新成功')
        // 更新视图
        // this.localSex = this.value
        this.$emit('input', this.localSex)
      } catch (err) {
        console.log(err)
        Toast('更新失败')
      }
      // 关闭弹层
      this.$emit('close')
    },
    onChange(a, b, index) { // onChange事件是自带的  第三个参数才是索引 所以前面两个参数虽然没有用到,但是也不能删除掉
      // Toast(`当前值：${value}, 当前索引：${index}`)
      // console.log(index)
      this.localSex = index
      // console.log(this.localSex)
    },
    onCancel() { // 点击取消
      this.$emit('close')
    }
  }
}

</script>

<style>

</style>
